﻿<!--07-全选全不选示例.html-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全选全不选示例</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked",true);
            })

            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked",false);
            })

            // 反选
            $("#checkedRevBtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked;
                })

                // 满选还需要更新最上方的全选/全不选框
                var allCount = $(":checkbox[name='items']").length;
                var selCount = $(":checkbox[name='items']:checked").length;
                // 总个数等于选中的个数， 则设置为 true，也就是选中，反之...
                $("#checkedAllBox").prop("checked", allCount == selCount);
            })

            // 提交按钮
            $("#sendBtn").click(function () {
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                })
            })

            // 全选/全不选 绑定单击事件
            $("#checkedAllBox").click(function () {
                // 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
                // 全选/全不选 的状态就是 所有的 items 的状态
                $(":checkbox[name='items']").prop("checked",this.checked);
            })

            // 给全部球类绑定单击事件
            $(":checkbox[name='items']").click(function () {
                // 要检查 是否满选
                // 获取全部的球类个数
                var allCount = $(":checkbox[name='items']").length;
                // 再获取选中的球类个数
                var checkedCount = $(":checkbox[name='items']:checked").length;

                $("#checkedAllBox").prop("checked",allCount == checkedCount);
            });
        })

    </script>
</head>
<body>

<form method="post" action="">

    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反　选"/>
    <input type="button" id="sendBtn" value="提　交"/>
</form>

</body>
</html>